<template>
	<div class="sys-file-container">
		<el-row :gutter="8" style="width: 100%">
			<el-col :span="4" :xs="24">
				<CmsColumnTree ref="cmsColumnTreeRef" @node-click="nodeClick" />
			</el-col>
			<el-col :span="20" :xs="24">
				<div v-show="state.isshowArticle"><ArticleContent ref="articleContentRef" /></div>
				<div v-show="state.isshowSinglePage"><SinglePageContent @handleQuery="shuaxincolumntree" ref="singlePageContentRef" /></div>
				<div v-show="state.isshowDownLoad"><DownloadContent ref="downloadContentRef" /></div>
				<div style="height: 100%" v-show="state.isaftersale"><AfterSaleContent ref="afterSaleContentRef"/></div>
			</el-col>
		</el-row>
	</div>
</template>

<script lang="ts" setup name="sysFile">
import { onMounted, reactive, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import '@vue-office/docx/lib/index.css';
import '@vue-office/excel/lib/index.css';

import CmsColumnTree from '/@/views/CMS/cms_content/common/cms_columnTree.vue';
import ArticleContent from '/@/views/CMS/cms_content/common/articleContent.vue';
import SinglePageContent from '/@/views/CMS/cms_content/common/singlePageContent.vue';
import DownloadContent from '/@/views/CMS/cms_content/common/downloadContent.vue';
import AfterSaleContent from '/@/views/CMS/cms_content/common/after_saleContent.vue';
import { getAPI } from '/@/utils/axios-utils';
import { SysFileApi } from '/@/api-services/api';
import { SysFile } from '/@/api-services/models';

// const baseUrl = window.__env__.VITE_API_URL;
const articleContentRef = ref<InstanceType<typeof ArticleContent>>();
const singlePageContentRef = ref<InstanceType<typeof SinglePageContent>>();
const cmsColumnTreeRef = ref<InstanceType<typeof CmsColumnTree>>();
const downloadContentRef = ref<InstanceType<typeof DownloadContent>>();
const afterSaleContentRef = ref<InstanceType<typeof AfterSaleContent>>();
const state = reactive({
	loading: false,
	fileData: [] as Array<SysFile>,
	queryParams: {
		fileName: undefined,
		startTime: undefined,
		endTime: undefined,
		sysFileTypeId: undefined,
	},
	tableParams: {
		page: 1,
		pageSize: 10,
		total: 0 as any,
	},
	filetypeData: [],
	dialogUploadVisible: false,
	diaglogEditFile: false,
	fileList: [] as any,
	dialogDocxVisible: false,
	dialogXlsxVisible: false,
	dialogPdfVisible: false,
	showViewer: false,
	docxUrl: '',
	excelUrl: '',
	pdfUrl: '',
	fileName: '',
	SysFileTypeId: '',
	SysFileTypeName: '',
	previewList: [] as string[],
	isshowArticle: false,
	isshowSinglePage: false,
	isshowDownLoad: false,
	isaftersale: false,
	eidtbtnshow: true,
	delbtnshow: true,
	movebtnshow: true,
	tableshow: true,
	tempsum: 1 as number,
});

onMounted(async () => {
	handleQuery();
});

// 查询操作
const handleQuery = async () => {
	if (state.queryParams.startTime == null) state.queryParams.startTime = undefined;
	if (state.queryParams.endTime == null) state.queryParams.endTime = undefined;

	state.loading = true;
	let params = Object.assign(state.queryParams, state.tableParams);
	var res = await getAPI(SysFileApi).apiSysFilePagePost(params);
	state.fileData = res.data.result?.items ?? [];
	state.tableParams.total = res.data.result?.total;
	state.loading = false;
};

// 重置操作
const resetQuery = () => {
	state.queryParams.fileName = undefined;
	state.queryParams.startTime = undefined;
	state.queryParams.endTime = undefined;
	state.queryParams.sysFileTypeId = undefined;
	handleQuery();
};

// 删除
const delFile = (row: any) => {
	ElMessageBox.confirm(`确定删除文件：【${row.fileName}】?`, '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(async () => {
			await getAPI(SysFileApi).apiSysFileDeletePost({ id: row.id });
			handleQuery();
			ElMessage.success('删除成功');
		})
		.catch(() => {});
};

// 打开文件预览页面
const openFilePreviewDialog = async (row: any) => {
	if (row.suffix == '.pdf') {
		state.fileName = `【${row.fileName}${row.suffix}】`;
		state.pdfUrl = getFileUrl(row);
		state.dialogPdfVisible = true;
	} else if (row.suffix == '.docx') {
		state.fileName = `【${row.fileName}${row.suffix}】`;
		state.docxUrl = getFileUrl(row);
		state.dialogDocxVisible = true;
	} else if (row.suffix == '.xlsx') {
		state.fileName = `【${row.fileName}${row.suffix}】`;
		state.excelUrl = getFileUrl(row);
		state.dialogXlsxVisible = true;
	} else if (['.jpg', '.png', '.jpeg', '.bmp'].findIndex((e) => e == row.suffix) > -1) {
		state.previewList = [getFileUrl(row)];
		state.showViewer = true;
	} else {
		ElMessage.error('此文件格式不支持预览');
	}
};

// 改变页面容量
const handleSizeChange = (val: number) => {
	state.tableParams.pageSize = val;
	handleQuery();
};

// 改变页码序号
const handleCurrentChange = (val: number) => {
	state.tableParams.page = val;
	handleQuery();
};

// 获取文件地址
const getFileUrl = (row: SysFile): string => {
	if (row.bucketName == 'Local') {
		return `/${row.filePath}/${row.id}${row.suffix}`;
	} else {
		return row.url!;
	}
};
// 树组件点击
const nodeClick = async (node: any) => {
	if (node.tempCode == 'article') {
		state.isshowArticle = true;

		state.isshowDownLoad = false;
		state.isshowSinglePage = false;
		state.isaftersale = false;
		articleContentRef.value?.inittableData();
	} else if (node.tempCode == 'singlePage') {
		state.isshowSinglePage = true;

		state.isshowDownLoad = false;
		state.isshowArticle = false;
		state.isaftersale = false;
		singlePageContentRef.value?.openUnit(node);
	} else if (node.tempCode == 'download') {
		state.isshowDownLoad = true;

		state.isshowSinglePage = false;
		state.isshowArticle = false;
		state.isaftersale = false;
		downloadContentRef.value?.openUnit(node);
	} else if (node.tempCode == 'Part') {
		state.isaftersale = true;

		state.isshowArticle = false;
		state.isshowDownLoad = false;
		state.isshowSinglePage = false;

		afterSaleContentRef.value?.inittableData(node);
	} else {
		state.isaftersale = false;
		state.isshowArticle = false;
		state.isshowDownLoad = false;
		state.isshowSinglePage = false;
	}
};
const shuaxincolumntree = async () => {
	cmsColumnTreeRef.value?.initTreeData();
};
// 文件渲染完成
const renderedHandler = () => {};
// 文件渲染失败
const errorHandler = () => {};
</script>
<style scoped>
.sys-file-container {
	height: 100%;
}
:deep(.el-row) {
	height: 100%;
}
:deep(.el-col) {
	height: 100%;
}
</style>
